<template>
  <div id="map" ref="map"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import { Vector as VectorSource, OSM} from 'ol/source.js';
import { Vector as VectorLayer} from 'ol/layer.js';

export default {
  name: "OMap",
  props: {
    vector: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.initMap();
    this.vector && this.addVectorSource();
    this.$emit('get-ready', this.map);
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: this.$refs.map,
        layers: [
          new Tile({
            source: new OSM()
          })
        ],
        view: new View({
          center: fromLonLat([104.912777, 34.730746]),
          zoom: 4.5
        })
      });
    },
    addVectorSource() {
      const vectorSource = new VectorSource();
      const vectorLayer = new VectorLayer({
        source: vectorSource,
      });
      this.map.addLayer(vectorLayer);
      this.vectorSource = vectorSource;
      this.vectorLayer = vectorLayer;
    }
  }
}
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
